<template>
  <div class="investmentred">
    <my-head title="投资红包" :go="true" :ri="false"></my-head>
    <div class="content">
      <div class="head">
        <div class="item" :class="{active : active==true ? true : false}" @click="tab(true)">
          未使用
        </div>
        <div class="item" :class="{active : active==false ? true : false}" @click="tab(false)">
          已使用
        </div>
      </div>
      <div class="msg">
        <div class="null">
          <img src="@/assets/null.png" alt="">
          <p>暂无数据</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Head from '@/components/Head'
export default {
  data(){
    return {
      active:true
    }
  },
  components:{
    myHead:Head
  },
  methods:{
    tab(val){
      console.log(typeof val)
      this.active = val
    }
  }
}
</script>

<style scoped lang="less">
  .investmentred{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    .content{
      flex: 1;
      display: flex;
      flex-direction: column;
      .active{
        color: #f06408;
      }
      .head{
        display: flex;
        flex-direction: row;
        padding: 0.04rem 0;
        border-top: 0.01rem solid #efefef;
        border-bottom: 0.02rem solid #dbdbdb;
        .item{
          flex: 1;
          text-align: center;
          font-size: 0.16rem;
          padding: 0.09rem 0;
          border-right: 0.01rem solid #efefef;
        }
        .item:last-child{
          border: 0;
        }
      }
      .msg{
        flex: 1;
        display: flex;
        .null{
          flex: 1;
          img{
            display: block;
            width: 2.34rem;
            margin: 0 auto;
            margin-top: 1rem;
          }
          p{
            text-align: center;
            color: #acacac;
            font-size: 0.13rem;
            padding: 0.13rem 0;
          }
        }
      }
    }
  }
</style>
